<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">  <!--z这个div就类似于跟组件-->
        <parent></parent> <!--展示父组件-->
    </div>
</body>
</html>
<!-- 父组件 -->
<template id="parent">
    <fieldset>
        <legend>父组件</legend>
        <input type="text" v-model='vall' >
        <child :v='vall'></child> <!--展示子组件-->
        <!-- 在子组件的标签中动态绑定一个自定义属性,让他的值为vall,同时这个vall又是父组件中的双向数据 -->
    </fieldset>
</template>
<!-- 子组件 -->
<template id="child">
    <fieldset>
        <legend>子组件</legend>
        <button @click='abc'>点击</button>
        <ul>
            <li v-for='(item,index) in arr' :key="index">{{item}}</li>
        </ul>
    </fieldset>
</template>
<script>
    //组件传参，父传子的流程
//1.在子组件的组件标签上，动态的绑定一个属性 ，值就是想要传递值
//2.在子组件中，通过props属性进行接收
    Vue.component('parent',{
        template:"#parent", //注册模板
        data () {
            return {
                vall:''      
            }
        },
        components: { //写子组件的时候component要加s
            'child':{ //注册parent组件下面的子组件
                template:'#child',
                props: ['v'], //通过props接受传递来的属性
                methods: {
                  abc(){
                      this.arr.push(this.v)
                  }  
                },
                data () {
                    return {
                        arr:['paly','watch','drink']
                    }
                }
            }
        }
    })
    const vm = new Vue({
        el:'#app',
    })
</script>